<!-- 工作台模块内容 -->
<div class="workbench-container">
  <!-- 标签页导航 -->
  <div class="tabs-bar">
    <div class="tab active">
      <span class="tab-title">工作台</span>
    </div>
  </div>
  
  <!-- 内容区域 -->
  <div class="workbench-content">
    <!-- 蓝色模块 -->
    <div class="blue-module">
      <div class="module-text">打造高效组织，从工作台开始</div>
      <div class="module-text-en">Build an Effective Team<br>with Workplace</div>
      <img src="../assets/PP23.png" alt="PP23" class="module-image">
    </div>
    
    <!-- 右上快捷卡片区域 -->
    <div class="quick-cards-container">
      <!-- 第一行 -->
      <div class="app-card">
        <img src="../assets/TE01.png" alt="打卡" class="app-icon">
        <span class="app-name">打卡</span>
      </div>
      <div class="app-card">
        <img src="../assets/TE02.png" alt="公告" class="app-icon">
        <span class="app-name">公告</span>
      </div>
      <div class="app-card">
        <img src="../assets/TE03.png" alt="日程" class="app-icon">
        <span class="app-name">日程</span>
      </div>
      
      <!-- 第二行 -->
      <div class="app-card">
        <img src="../assets/TE04.png" alt="审批" class="app-icon">
        <span class="app-name">审批</span>
      </div>
      <div class="app-card">
        <img src="../assets/TE05.png" alt="帮助中心" class="app-icon">
        <span class="app-name">帮助中心</span>
      </div>
      <div class="app-card add-app-card">
        <span class="add-icon">+</span>
        <span class="app-name">添加常用应用</span>
      </div>
    </div>
    
    <!-- 全部应用标题 -->
    <div class="all-apps-title">全部应用</div>
    
    <!-- 分类导航栏 -->
    <div class="category-nav">
      <div class="category-item active" data-category="recent">
        <span class="category-text">最近使用</span>
      </div>
      <div class="category-item" data-category="communication">
        <span class="category-text">沟通协作</span>
      </div>
      <div class="category-item" data-category="survey">
        <span class="category-text">问卷调研</span>
      </div>
      <div class="category-item" data-category="culture">
        <span class="category-text">校园文化</span>
      </div>
      <div class="category-item" data-category="training">
        <span class="category-text">培训学习</span>
      </div>
      <div class="category-item" data-category="lowcode">
        <span class="category-text">低代码</span>
      </div>
      <div class="category-item" data-category="admin">
        <span class="category-text">综合行政</span>
      </div>
      <div class="category-item" data-category="e-office">
        <span class="category-text">电子办公</span>
      </div>
      <div class="category-item" data-category="platform-login">
        <span class="category-text">平台登录</span>
      </div>
      <div class="category-item" data-category="project-mgmt">
        <span class="category-text">项目管理</span>
      </div>
    </div>
    
    <!-- 应用卡片网格 -->
    <div class="app-cards-container">
      <!-- 第一行 -->
      <div class="app-card">
        <img src="../assets/TP01.png" alt="校园百科" class="app-icon">
        <span class="app-name">校园百科</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP02.png" alt="智能会议室" class="app-icon">
        <span class="app-name">智能会议室</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP03.png" alt="报表库" class="app-icon">
        <span class="app-name">报表库</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP04.png" alt="订阅号" class="app-icon">
        <span class="app-name">订阅号</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP05.png" alt="校报" class="app-icon">
        <span class="app-name">校报</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP06.png" alt="即时设计" class="app-icon">
        <span class="app-name">即时设计</span>
      </div>
      
      <!-- 第二行 -->
      <div class="app-card">
        <img src="../assets/TP07.png" alt="审批" class="app-icon">
        <span class="app-name">审批</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP11.png" alt="问卷调查" class="app-icon">
        <span class="app-name">问卷调查</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP12.png" alt="提醒" class="app-icon">
        <span class="app-name">提醒</span>
      </div>
      
      <!-- 第三行 -->
      <div class="app-card">
        <img src="../assets/TP13.png" alt="帮助中心" class="app-icon">
        <span class="app-name">帮助中心</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP14.png" alt="心知天气" class="app-icon">
        <span class="app-name">心知天气</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP15.png" alt="服务台" class="app-icon">
        <span class="app-name">服务台</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP16.png" alt="知识" class="app-icon">
        <span class="app-name">知识</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP17.png" alt="板凳看板" class="app-icon">
        <span class="app-name">板凳看板</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP18.png" alt="图样设计" class="app-icon">
        <span class="app-name">图样设计</span>
      </div>
      
      <!-- 第四行 -->
      <div class="app-card">
        <img src="../assets/TP19.png" alt="课堂" class="app-icon">
        <span class="app-name">课堂</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP20.png" alt="魔点校园" class="app-icon">
        <span class="app-name">魔点校园</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP21.png" alt="汇报" class="app-icon">
        <span class="app-name">汇报</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP22.png" alt="墨刀" class="app-icon">
        <span class="app-name">墨刀</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP23.png" alt="公告" class="app-icon">
        <span class="app-name">公告</span>
      </div>
      <div class="app-card">
        <img src="../assets/TP24.png" alt="打卡" class="app-icon">
        <span class="app-name">打卡</span>
      </div>
    </div>
  </div>
</div>

<!-- 需要加载 workbench.css 样式 -->
<link rel="stylesheet" href="./styles/workbench.css">

<style>
  .workbench-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  /* 标签页导航栏 */
  .tabs-bar {
    display: flex;
    align-items: stretch;
    background-color: #f0f2f5;
    padding: 0;
    gap: 4px;
    min-height: 40px;
    flex-shrink: 0;
  }
  
  /* 单个标签页 */
  .tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #dcdfe6;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    font-size: 13px;
    color: #606266;
    min-width: 180px;
    max-width: 360px;
    transition: all 0.2s;
  }
  
  /* 标签右下角内凹圆角效果 */
  .tab.active::after {
    content: '';
    position: absolute;
    right: -7px;
    bottom: 0;
    width: 7px;
    height: 7px;
    background-color: #f0f2f5;
    border-radius: 0 0 0 7px;
  }
  
  .tab.active::before {
    content: '';
    position: absolute;
    right: -7px;
    bottom: 0;
    width: 7px;
    height: 7px;
    background-color: #F8F9FA;
    border-radius: 7px 0 0 0;
  }
  
  .tab:hover {
    background-color: #e9ecef;
  }
  
  .tab.active {
    background-color: #ffffff;
    color: #303133;
    font-weight: 500;
  }
  
  .tab-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* 内容区域 */
  .workbench-content {
    position: relative;
    flex: 1;
    overflow: auto;
    background-color: #F8F9FA;
  }
  
  .blue-module {
    position: absolute;
    left: 28px;
    top: 25px;
    width: 390px;
    height: 156px;
    background-color: #1990FF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(25, 144, 255, 0.3), 
                0 4px 12px rgba(0, 0, 0, 0.15),
                0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  .module-image {
    position: absolute;
    left: 5px;
    top: 48px;
    width: 40%;
    height: auto;
    object-fit: contain;
  }
  
  .module-text {
    position: absolute;
    left: 60px;
    top: 12px;
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: #FFFFFF;
    font-weight: bold;
    line-height: 1.2;
    z-index: 1;
  }
  
  .module-text-en {
    position: absolute;
    left: 179px;
    top: 48px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #FFFFFF;
    font-weight: normal;
    line-height: 1.2;
    text-align: right;
    z-index: 1;
  }
  
  /* 右上快捷卡片容器 */
  .quick-cards-container {
    position: absolute;
    right: 20px;
    top: 25px;
    display: grid;
    grid-template-columns: repeat(3, 197px);
    row-gap: 32px;
    column-gap: 30px;
    padding: 0;
  }
  
  /* 添加应用卡片 */
  .add-app-card {
    background-color: #F5F7FA;
    border: 1px dashed #DCDFE6;
    justify-content: center;
  }
  
  .add-app-card:hover {
    background-color: #ECF5FF;
    border-color: #409EFF;
  }
  
  .add-icon {
    font-size: 20px;
    color: #909399;
    margin-right: 8px;
  }
  
  .add-app-card:hover .add-icon,
  .add-app-card:hover .app-name {
    color: #409EFF;
  }
  
  
  .category-nav::-webkit-scrollbar {
    display: none;
  }
  
  .category-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    flex-shrink: 0;
    position: relative;
  }
  
  .category-item:not(:last-child)::after {
    content: '/';
    position: absolute;
    right: 0;
    color: #DCDFE6;
    font-weight: 300;
  }
  
  .category-item:hover {
    color: #409EFF;
  }
  
  .category-item.active {
    color: #409EFF;
    font-weight: 500;
  }
  
  .category-text {
    line-height: 20px;
  }
  
  /* 全部应用标题 */
  .all-apps-title {
    position: absolute;
    left: 28px;
    top: 219px;
    font-size: 23px;
    font-weight: 600;
    color: #303133;
    line-height: 1.2;
  }
  
  /* 分类导航栏 */
  .category-nav {
    position: absolute;
    left: 18px;
    right: 20px;
    top: 261px;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0;
  }
  
  /* 应用卡片容器 */
  .app-cards-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 312px;
    display: grid;
    grid-template-columns: repeat(5, 197px);
    row-gap: 31px;
    column-gap: 17px;
    padding: 0 20px 45px 20px;
    justify-content: space-between;
  }
  
  /* 单个应用卡片 */
  .app-card {
    width: 197px;
    height: 60px;
    background-color: #FFFFFF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  
  .app-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }
  
  /* 应用图标 */
  .app-icon {
    width: 39px;
    height: 39px;
    margin-right: 12px;
    flex-shrink: 0;
    border-radius: 7px;
  }
  
  /* 应用名称 */
  .app-name {
    font-size: 14px;
    color: #303133;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
</style>

